import loadable from "@loadable/component"
import { FormattedMessage } from "react-intl"
import { HomeOutlined, CodeSandboxOutlined, FileExcelOutlined, UserOutlined } from '@ant-design/icons'

// 最顶层的两个组件：Layout、Login
const Layout = loadable(() => import('@/layout'))
const Login = loadable(() => import('./login'))

// 业务组件，都是Layout的后代（嵌套路由）
const Dashboard = loadable(() => import('./dashboard'))
const GoodList = loadable(() => import('./good/GoodList'))
const GoodForm = loadable(() => import('./good/GoodForm'))
const Page401 = loadable(() => import('./errorpage/Page401'))
const Page404 = loadable(() => import('./errorpage/Page404'))
const Personal = loadable(() => import('./personal'))

// Sider上的路由信息（有权限的动态路由）
export const asyncRoutes = [
  {
    key: 9,
    label: <FormattedMessage id="menu.dashboard" />,
    icon: <HomeOutlined />,
    path: '/dashboard',
    element: <Dashboard />
  },
  {
    key: 10,
    label: <FormattedMessage id="menu.good" />,
    icon: <CodeSandboxOutlined />,
    roles: ['admin', 'editor'],
    children: [
      {
        key: 1001,
        label: <FormattedMessage id="menu.good.list" />,
        path: '/good/list',
        element: <GoodList />,
        // roles: ['admin']
      },
      {
        key: 1002,
        label: <FormattedMessage id="menu.good.add" />,
        path: '/good/add',
        element: <GoodForm />,
        // roles: ['editor']
      },
      {
        key: 1003,
        label: <FormattedMessage id="menu.good.edit" />,
        path: '/good/edit/:id', // 动态路由
        element: <GoodForm />,
        // roles: ['editor'],
        hidden: true // 不在Menu上显示
      }
    ]
  },
  {
    key: 11,
    label: <FormattedMessage id="menu.errorpage" />,
    icon: <FileExcelOutlined />,
    roles: ['admin', 'editor'],
    children: [
      {
        key: 1101,
        label: 401,
        path: '/errorpage/401',
        element: <Page401 />
      },
      {
        key: 1102,
        label: 404,
        path: '/errorpage/404',
        element: <Page404 />
      },
    ]
  },
  {
    key: 12,
    label: <FormattedMessage id="menu.personal" />,
    icon: <UserOutlined />,
    path: '/personal',
    element: <Personal />,
    roles: ['admin', 'editor'],
    hidden: true
  }
]

// 非Sider上的路由信息（无权限的静态路由）
export const constantRoutes = [
  {
    key: 1,
    path: '/',
    element: <Layout />,
    children: [] // 权限待实现
  },
  {
    key: 2,
    path: '/login',
    element: <Login />
  }
]